<template>
  <div class="Header">
    <div class="navbar">
      <div class="brand">
        <router-link :to="{name:'root'}">
          <img src="../assets/cnodejs_light.svg">
        </router-link>
      </div>
      <div class="serach">
        <form action="/serach">
          <el-input prefix-icon="el-icon-search"  size="mini" WaitColor="wait"></el-input>
        </form>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">新手入门</a></li>
          <li><a href="#">API</a></li>
          <li><a href="#">关于</a></li>
          <li><a href="#">注册</a></li>
          <li><a href="#">登录</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.Header {
  background:#5a5555 ;
  height: 50px;
}
.navbar{
  height: 100%;
  width: 100%;
}
.brand{
  display: inline-block;
  width: 180px;
  height: 100%;
  margin-right: 50px;
}

a{
  text-decoration: none;
  color: #cbc9c9;
}
img{
  max-width: 120px;
  margin-left: 50px;
	margin-top: 10px;
}
.serach{
  display: inline-block;
  position: relative;
  top: -7px;

}
.nav{
  float: right;
  height: 50px;
  margin-right: 80px;
  
}
ul{
  list-style: none;
  display: flex;
  height: 100%;
}
ul li{
  line-height: 50px;
  margin:0 10px;
  opacity: 0.7;
  font-size: 17px;
}
li:hover{
  opacity:1;
}

</style>